<template>
  <div>
    <nav-header :headerTitle="'消息中心'" :navBgColor="'#fff'"></nav-header>
    <div class="nav-height"></div>
    <van-list
      class="msg-cengter"
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="gainListByPages"
      :error.sync="error"
      error-text="请求失败，点击重新加载"
    >
      <div class="msg-item" v-for="item in list" :key="item" @click="tap2Detail(item.jumpUri,item.msgType)">
        <p class="msg-item-title">{{item.msgTitle}}</p>
        <div class="msg-item-content" v-html="item.msgContent"></div>
        <p class="msg-item-time">{{item.createTime}}</p> 
        <img class="righticon" src="@/assets/images/sign_more.png" alt v-if="item.msgType!==7&&item.msgType!==8"/>
      </div>
    </van-list>
  </div>
</template>

<script>
import navHeader from "@/components/NavHeader";
import mixin from "@/utils/mixin";
import { List } from "vant";
Vue.use(List);

export default {
  name: "msgCenter",
  mixins: [mixin],
  components: {
    navHeader
  },
  data() {
    return {
      list: [],
      finished: false,
      loading: false,
      error: false,
      // list 分页信息 
      pageNum: 1,
      pageSize: 10
    };
  },
  mounted() {  
    this.$setgoindex();
    this.$bridge.callHandler('clearMsgNum', {}, (res) => {
      console.log(res)
    })
    // this.gainListByPages();
  },
  methods: {
    // list 分页 
    gainListByPages() { 
      let query = this.$route.query;
      if (query.uniqueId) {
        if (query.uniqueId != 0) {
          window.localStorage.setItem("uniqueIdByInfluencer", query.uniqueId);
          window.localStorage.setItem("uniqueId", query.aduniqueId);
        } 
      }
      let sendData = {
        uniqueId: window.localStorage.getItem("uniqueIdByInfluencer"),
        pageNum: this.pageNum,
        pageSize: this.pageSize
      };
      this.$http.post("user/getFlowUserSysMsg", sendData).then(
        res => {
          let resData = res.data;
          (resData.items).forEach(element => {
            element.createTime = this.splitTime(element.createTime) ;
          });
          this.list = this.list.concat(resData.items);
          ++this.pageNum;
          // 加载状态结束
          this.loading = false;
          // 数据全部加载完成
          if (resData.pages < this.pageNum) {
            this.finished = true;
          }
        },
        err => {
          this.error = true;
          console.log(err);
        }
      );
    },
    //跳转消息详情
    tap2Detail(url,msgType){
      if(msgType ==7 || msgType == 8){
        return false;
      }
      window.location.href = url;
    },
    // 规格时间毫秒数
    splitTime (overTime) { 
      let newTime = new Date( overTime ) ; 
      let minute = newTime.getMinutes();
      let hour = newTime.getHours();
      let day = newTime.getDate();
      let month = newTime.getMonth() + 1;
      let year = newTime.getFullYear();
      if (minute < 10) {
        minute = '0' + minute
      }
      if (hour < 10) {
        hour = '0' + hour
      }
      if (day < 10) {
        day = '0' + day
      }
      if (month < 10) {
        month = '0' + month
      }
      return  `${year}-${month}-${day} ${hour}:${minute}`
    },
  }
};
</script>
<style lang="scss" scoped>
.msg-cengter {
  width: 686px;
  margin: 0 auto 30px;
  .msg-item {
    padding: 30px 0;
    border-bottom: 1px solid rgba(237, 237, 237, 1);
    position: relative;
    .msg-item-title {
      font-size: 34px;
      font-family: PingFangSC-Medium;
      font-weight: 700;
      color: rgba(48, 49, 51, 1);
      line-height: 48px;
    }
    .msg-item-content {
      width: 606px;
      font-size: 30px;
      font-family: PingFangSC-Regular;
      font-weight: 400;
      color: rgba(129, 129, 129, 1);
      line-height: 48px;
      margin: 12px 0;
    }
    .msg-item-time {
      font-size: 28px;
      font-family: PingFangSC-Regular;
      font-weight: 400;
      color: rgba(200, 200, 200, 1);
      line-height: 40px;
    }
    .righticon {
      width: 30px;
      position: absolute;
      top: 30px;
      right: 0;
    }
  }
}
</style>
